<template>
  <div class="graphblock-root">
    <div class="border"></div>
    <DecoTitle label="相关人物" type="trig" class="title"></DecoTitle>
    <FullBtn class="zoombtn"
      :zoomin="zoomin" 
      @zoomin="$emit('zoomin'), resize()"
      @zoomout="$emit('zoomout'), resize()">
    </FullBtn>
    <div class="echart"></div>
  </div>
</template>

<script>
import DecoTitle from '../Topic/DecoTitle'
import echarts from 'echarts'
import FullBtn from '../common/FullBtn.vue'

var option = {
  animationDurationUpdate: 1500,
  animationEasingUpdate: 'quinticInOut',
  tooltip: {
    show: false
  },
  series : [{
    type: 'graph',
    layout: 'force',
    force: {
      edgeLength: 220,
      repulsion: 2200
    },
    symbolSize: 80,
    roam: 'scale',
    label: {
      normal: {
        show: true
      }
    },
    itemStyle:{
      normal: {
        color: 'rgba(0,0,0,1)',
        borderColor: '#59b3ff',
        borderWidth: 1,
        shadowColor: '#59b3ff',
        shadowBlur: 5,
      }
    },
    draggable: true,
    data: [{
      name: '乔布斯\n（主要）',
      itemStyle: {
        normal: {
          borderColor: '#ff0000',
          shadowColor: '#ff0000',
        }
      }
    },
    {name: '蒂姆·库克'},
    {name: '劳伦 鲍威尔'},
    {name: '丽萨 乔布斯'},
    {name: '乔纳森 艾夫'},
    {name: '保罗 乔布斯'},
    {name: '克拉拉 \n乔布斯'},
    {name: '奥巴马'},
    {name: '比尔盖茨'},
    {name: '史蒂夫·\n沃兹尼艾克'},
    {name: '龙·韦恩'}],
    links: [
      {source: 0, target: 1},
      {source: 0, target: 2},
      {source: 0, target: 3},
      {source: 0, target: 4},
      {source: 0, target: 5},
      {source: 0, target: 6},
      {source: 0, target: 7},
      {source: 0, target: 9},
      {source: 0, target: 10},
      {source: 1, target: 7},
      {source: 2, target: 7},
      {source: 5, target: 7},
      {source: 5, target: 6},
      {source: 6, target: 7},
      {source: 6, target: 8},
      {source: 7, target: 8},
      {source: 7, target: 9},
    ],
    lineStyle: {
      normal: {
        color: '#59b3ff',
        type: 'dotted',
        opacity: 0.9,
        width: 2,
        shadowColor: '#59b3ff',
        shadowBlur: 5,
        curveness: 0.2
      }
    }
  }]
}
export default {
  name: 'graphblock',
  components: {DecoTitle, FullBtn},
  props: ['zoomin'],
  data(){
    return {
      chart: null
    }
  },
  mounted(){
    var el = this.$el.getElementsByClassName('echart')[0]
    fetch('./static/china.json').then(res => res.json())
    .then(res => {
      echarts.registerMap('china', res);
      this.chart = echarts.init(el)
      this.chart.setOption(option)
    })
  },
  methods: {
    resize(){
      requestAnimationFrame(this.chart.resize)
    }
  }
}
</script>

<style scoped lang="stylus">
.graphblock-root
  padding 12px
  padding-top 50px
  >.border
    border 48px solid
    border-image url('./img/cnct-border.png') 48
    box-sizing border-box
    height 100%
  >.title
    position absolute
    top 10px
    left 50%
    transform translateX(-50%)
  >.echart
    position absolute
    left 10px
    top 50px
    right 10px
    bottom 10px

.zoombtn
  position absolute
  top 20px
  right 20px

</style>